export function ClassDemo() {
  let showClass = true;

  const classObj = {
    box: true,
    show: showClass,
    hide: !showClass,
  };

  return (
    <div>
      <h3>动态绑定类名测试</h3>
      <h2>模版字符串</h2>
      <div className={` box ${showClass ? " show" : ""}`}>我是什么颜色</div>

      <h2>对象方式</h2>
      <div className={classObj.box ? "box" : ""}>我是什么颜色</div>
      <div
        className={Object.keys(classObj)
          .filter((key) => classObj[key])
          .join(" ")}
      >
        我是什么颜色
      </div>
    </div>
  );
}
